﻿@model SecurityAdmin.Web.Models.UserRoleViewModel
@{
    ViewBag.Title = "Index";
}

<h2>User Role Assignment</h2>

@using (Html.BeginForm())
{
 
<table>
    <tr>
        <td>
            <button name="button">Add</button>
        </td>
        <td>
            <button type="button" onclick="$('#removeForm').submit()">Remove</button>
        </td>
    </tr>
    <tr>
        <td>
                @(Html.Kendo().ListView<SecurityApi.DataAccess.Role>(Model.AvailableRoles)
                    .Name("lvAvailable")
                    .HtmlAttributes(new { style = "height:300px;width:250px" })
                    .TagName("div")
                    .ClientTemplateId("template")
                    .DataSource(dataSource => {
                        dataSource.Read(read => read.Action("AvailableRoles_Read", "ListView"));
                        dataSource.PageSize(12);
                    })
                    .Pageable() 
                    .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))
                )
        </td>

        <td>
            @(Html.Kendo().ListView<SecurityApi.DataAccess.Role>(Model.AssignedRoles)
                .Name("lvExisting")
                .HtmlAttributes(new { style = "height:300px;width:250px" })
                .TagName("div")
                .ClientTemplateId("template")
                .DataSource(dataSource => {
                    dataSource.Read(read => read.Action("ExistingRoles_Read", "ListView"));
                    dataSource.PageSize(12);
                })
                .Pageable() 
                .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))
            )
        </td>
    </tr>

</table>
}

@using (Html.BeginForm("Index", "UserRole", FormMethod.Post, new { id = "removeForm" })) 
{} 


<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <table>
            <tr>
                <td>
                 <a class='link2button' href="/UserRole/AddUserRole/?roleId=#= RoleId #" + ">Add</a>
                </td>

                <td>
                 <h3>${RoleName}</h3>
                </td>
            </tr>
        </table>
    </div>
</script>

<style scoped="scoped">

    /* ------------------
 Make a link look like nice button
------------------   */
.link2button 
{

display: block;
width: 70px;
height: 20px;
background: darkgray;
padding-top:8px;
padding-left:4px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
font-size:12px;
text-decoration:none;
}​
</style>